<template>
	<view class="upBackTop" @click="upTop">
		<up-icon name="arrow-up" color="#646A6E" size="28"></up-icon>
	</view>
</template>

<script setup>
	import {
		onMounted
	} from 'vue';
	onMounted(() => {
		addEventListener('scroll', (e) => {
			let dom = document.querySelector('.upBackTop')
			let top = document.documentElement.scrollTop || document.body.scrollTop;
			if (top > 200) {
				dom.setAttribute('scrollTop', 'scrollTop')
			} else if (top < 50) {
				dom.removeAttribute('scrollTop')
			}

		})
	})


	const upTop = () => {
		let dom = document.querySelector('.upBackTop')
		document.documentElement.scrollTop = 0
		dom.removeAttribute('scrollTop')
	}
</script>

<style>
	.upBackTop {
		padding: 15rpx;
		border-radius: 50%;
		background-color: #E1E1E1;
		position: fixed;
		z-index: 99999;
		right: 0;
		bottom: 0;
		transform: translate(-10%, -200%);
		display: none;
	}

	[scrollTop=scrollTop] {
		display: block;
		transition: 1 linear 2
	}
</style>